<template>
    <div class="advantages">
      <p class="title">Advantages of MT5 WebTrader</p>
      <div class="advantagesbox">
        <div>
          <img src="../images/2.png" alt="">
        </div>
        <div>
          <ul>
            <li>
              <p>Multiple Trading Instruments</p>
              <p>Supports a variety of trading instruments including indices, forex, precious metals, and energy.</p>
            </li>
            <li>
              <p>Trading via Web Browser</p>
              <p>No software download required, trade anytime, anywhere.</p>
            </li>
            <li>
              <p>One-Click Trading</p>
              <p>Simplifies the trading process, enabling quick execution of trades.</p>
            </li>
            <li>
              <p>Supports All Order Types</p>
              <p>Including market orders, pending orders, stop loss, and take profit.</p>
            </li>
            <li>
              <p>Customisable Charts</p>
              <p>Flexible charting features to meet personalised needs.</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="webtrader">
      <div>
        <div>
            <p>Why Choose MT5 WebTrader?</p>
            <p>MT5 WebTrader can access the global market without  downloading.</p>
        </div> 
        <img src="../images/3.png" alt=""> 
      </div>
    </div>
    <div class="btngroup">
        <div>
            Ready to start trading? Trusted by many traders, quick and safe
        </div>
        <button>Enter the MetaTrader Web Terminal</button>
    </div>
</template>

<script lang='ts'>

  import { defineComponent, reactive, onMounted} from 'vue'

  export default defineComponent({

    name: 'desktop',

    props: {},

    components: {},

    setup(props, { emit }) {

      const state = reactive({
      
      })

      onMounted(()=>{
        console.log('组件挂载了')
      })

      return {
        state
      }

    }

  })
</script>

<style lang='scss' scoped>
    .advantages{
        background-color:#fff;
        padding-top:120px;
        padding-bottom:90px;
        display: flex;
        flex-direction: column;
        align-items: center;

        p,ul{
            margin:0;
            padding:0;
            list-style: none;
        }

        .title{
            font-weight: 900;
            font-size: 40px;
            color: #E24737;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .advantagesbox{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top:106px;
            width:1200px;

            img{
                width:399px;
                height:463px;
            }
        }

        ul{
            margin-left:145px;
            li{
                margin-top:41px;
                p:nth-child(1){
                    font-weight: 400;
                    font-size: 30px;
                    color: #333333;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
                p:nth-child(2){
                    font-weight: 400;
                    font-size: 18px;
                    color: #666666;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin-top:15px;
                }
            }
            li:nth-child(1){
                margin-top:0;
            }
        }
    }

    .webtrader{
        background-color:#FAEEEC;
        padding-top:72px;
        padding-bottom:139px;
        >div{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width:1200px;
            margin:0 auto;

            img{
            width:452px;
            height:399px; 
            }

            div{
                margin-right:60px;
                p:nth-child(1){
                    font-weight: 900;
                    font-size: 40px;
                    color: #E24737;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
                p:nth-child(2){
                    font-weight: 400;
                    font-size: 24px;
                    color: #333333;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }

    .btngroup{
        background-color:#EEDAD8;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding:40px 0;
        div{
            font-weight: 400;
            font-size: 36px;
            color: #E24737;
            font-style: normal;
            text-transform: none;
        }
        button{
            width: 456px;
            height: 71px;
            background: #E24737;
            border-radius: 8px 8px 8px 8px;
            margin-left:30px;
            border:none;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
</style>